<template>
  <div class="app">
    <div>
      <div style="position: relative">
        <itemBox title="易耗品使用预警" class="mt24">
          <!-- <table-scroll-pro
          :data="tableDataA"
          :columns="columnsA"
          :class-option="classOption"
          :table-config="tableConfig"
          :config="tableConfig"
        >
        </table-scroll-pro> -->
          <div class="yujing">
            <div class="text">预警 10</div>
          </div>
          <scroll style="height: 600px">
            <div v-for="item in consumablesList">
              <div class="list">
                <div class="schoolBg"></div>
                <div class="left">
                  <div>{{ item.school }}</div>
                  <div style="margin: 5px 0">
                    <span style="color: #b5bac2; font-size: 14px">教师数：</span
                    ><span class="number">{{ item.teacherNum }}</span
                    >人
                  </div>
                  <div>
                    <span style="color: #b5bac2; font-size: 14px">学生数：</span
                    ><span class="number">{{ item.studentNum }}</span
                    >人
                  </div>
                </div>
                <div class="right">
                  <div class="rightBox">
                    <div>{{ item.consumables }}</div>
                    <div style="width: 50px" class="rightSmall">易耗品名称</div>
                  </div>
                  <div class="rightBox">
                    <div>
                      <span class="number">{{ item.cityNum }}</span
                      >张/人
                    </div>
                    <div style="width: 60px" class="rightSmall">
                      全市平均使用量
                    </div>
                  </div>
                  <div class="rightBox">
                    <div style="width: 80px">
                      <span class="number">{{ item.schoolNum }}</span
                      >张/人
                    </div>
                    <div style="width: 30px" class="rightSmall">本校人均</div>
                  </div>
                  <div class="rightBox">
                    <div class="number" style="color: #00fffa">
                      {{ item.schoolPercent }}
                    </div>
                    <div style="width: 70px" class="rightSmall">
                      高出全市百分比
                    </div>
                  </div>
                </div>
              </div>
              <div class="border"></div>
            </div>
          </scroll>
        </itemBox>
      </div>
    </div>
    <!-- border-bottom: 1px solid #073b71 -->
    <div style="margin-top: 24px; position: relative">
      <itemBox title="装备冗余预警" class="mt24">
        <!-- <table-scroll-pro
          :data="tableDataA"
          :columns="columnsA"
          :class-option="classOption"
          :table-config="tableConfig"
          :config="tableConfig"
        >
        </table-scroll-pro> -->
        <div class="yujing">
          <div class="text">预警 10</div>
        </div>
        <scroll style="height: 600px">
          <div v-for="item in equipmentList" >
            <div class="list">
              <div class="schoolBg"></div>
              <div class="left">
                <div>{{ item.school }}</div>
                <div style="margin: 5px 0">
                  <span style="color: #b5bac2; font-size: 14px">教师数：</span
                  ><span class="number">{{ item.teacherNum }}</span
                  >人
                </div>
                <div>
                  <span style="color: #b5bac2; font-size: 14px">学生数：</span
                  ><span class="number">{{ item.studentNum }}</span
                  >人
                </div>
              </div>
              <div class="right">
                <div class="rightBox">
                  <div>{{ item.consumables }}</div>
                  <div class="rightSmall">装备名称</div>
                </div>
                <div class="rightBox">
                  <div>
                    <span class="number">{{ item.cityNum }}</span
                    >台
                  </div>
                  <div class="rightSmall">标准数</div>
                </div>
                <div class="rightBox">
                  <div>
                    <span class="number">{{ item.schoolNum }}</span
                    >台
                  </div>
                  <div class="rightSmall">本校数</div>
                </div>
                <div class="rightBox">
                  <div class="number" style="color: #00fffa">
                    {{ item.schoolPercent }}
                  </div>
                  <div style="width: 69px" class="rightSmall">
                    高出标准百分比
                  </div>
                </div>
              </div>
            </div>
            <div class="border"></div>
          </div>
        </scroll>
      </itemBox>
    </div>
  </div>
</template>

<script>
import drawMixin from "@/utils/drawMixin";
import countTo from "vue-count-to";
import pageTitle from "../../components/pageTitle";
import itemBox from "../../components/itemBox";
import subTit from "../../components/subTit";
import chart from "@/components/eChart";
import scroll from "@/views/food/components/tableScroll/index.vue";
let mixin = new drawMixin();

export default {
  name: "index",
  components: { countTo, pageTitle, itemBox, subTit, chart, scroll },
  mixins: [mixin],
  data() {
    return {
      consumablesList: [
        {
          school: "xxxx学校",
          teacherNum: "62",
          studentNum: "1825",
          consumables: "A4纸",
          cityNum: "2352",
          schoolNum: "2450",
          schoolPercent: "4.2%",
        },
        {
          school: "xxxx学校",
          teacherNum: "52",
          studentNum: "1632",
          consumables: "A4纸",
          cityNum: "2352",
          schoolNum: "2448",
          schoolPercent: "4.1%",
        },
        {
          school: "xxxx学校",
          teacherNum: "59",
          studentNum: "1521",
          consumables: "A4纸",
          cityNum: "2352",
          schoolNum: "2442",
          schoolPercent: "3.9%",
        },
        {
          school: "xxxx学校",
          teacherNum: "48",
          studentNum: "1321",
          consumables: "A4纸",
          cityNum: "2352",
          schoolNum: "2439",
          schoolPercent: "3.7%",
        },
        {
          school: "xxxx学校",
          teacherNum: "42",
          studentNum: "1262",
          consumables: "A4纸",
          cityNum: "2352",
          schoolNum: "2436",
          schoolPercent: "3.6%",
        },
      ],
      equipmentList: [
        {
          school: "xxxx学校",
          teacherNum: "38",
          studentNum: "1621",
          consumables: "计算机",
          cityNum: "2365",
          schoolNum: "2440",
          schoolPercent: "3.2%",
        },
        {
          school: "xxxx学校",
          teacherNum: "42",
          studentNum: "1183",
          consumables: "计算机",
          cityNum: "2365",
          schoolNum: "2438",
          schoolPercent: "3.1%",
        },
        {
          school: "xxxx学校",
          teacherNum: "35",
          studentNum: "1422",
          consumables: "计算机",
          cityNum: "2365",
          schoolNum: "2439",
          schoolPercent: "3.1%",
        },
        {
          school: "xxxx学校",
          teacherNum: "45",
          studentNum: "1203",
          consumables: "计算机",
          cityNum: "2365",
          schoolNum: "2431",
          schoolPercent: "2.8%",
        },
        {
          school: "xxxx学校",
          teacherNum: "31",
          studentNum: "1025",
          consumables: "计算机",
          cityNum: "2365",
          schoolNum: "2428",
          schoolPercent: "2.7%",
        },
      ],
      columnsA: [
        {
          label: "学生数（人）",
          prop: "data",
          align: "center",
          width: 72,
        },
        { label: "餐费（元）", prop: "peopleNum", width: 72, align: "center" },
        { label: "食材采购费（元）", prop: "data", width: 72, align: "center" },
        { label: "人工费（元）", prop: "data", width: 72, align: "center" },
        { label: "其他（元）", prop: "data", width: 72, align: "center" },
        { label: "食材占餐费比", prop: "data", width: 72, align: "center" },
      ],
      tableDataA: [
        {
          name: `xxxxx学校`,
          peopleNum: "xxx",
          data: "xxx",
        },
        {
          name: `xxxxx学校`,
          peopleNum: "xxx",
          data: "xxx",
        },
        {
          name: `xxxxx学校`,
          peopleNum: "xxx",
          data: "xxx",
        },
        {
          name: `xxxxx学校`,
          peopleNum: "xxx",
          data: "xxx",
        },
        {
          name: `xxxxx学校`,
          peopleNum: "xxx",
          data: "xxx",
        },
      ],
      classOption: {
        limitMoveNum: 4,
        singleHeight: 60, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
        waitTime: 2000, // 单步停止等待时间(默认值1000ms)
      },
      tableConfig: {
        headerHeight: "70px",
        rowHeight: "60px",
      },
      option: {},
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.app {
  width: 100%;
  height: 100%;
  .yujing {
    width: 152px;
    height: 40px;
    background-image: url("~@/assets/check/yujing.png");
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    right: 0;
    .text {
      font-family: PingFangSC-Medium;
      font-size: 20px;
      color: #ffdeaa;
      letter-spacing: 1.2px;
      text-align: center;
      line-height: 40px;
      font-weight: 500;
    }
  }
  .border {
    width: 100%;
    height: 4px;
    background: url("~@/assets/imgSchoolHouse/divider_s.svg") no-repeat;
    margin: 24px 0;
  }

  .list {
    position: relative;
    display: flex;
    width: 100%;
    .schoolBg {
      position: absolute;
      top: 0;
      left: 0;
      width: 131px;
      height: 24px;
      background: url("~@/assets/check/schoolBg.png") no-repeat;
      background-size: 100% 100%;
      z-index: -1;
    }
    .left {
      width: 131px;
      height: 78px;
      border-right: 1px solid rgba(76, 154, 255, 0.28);
      .number {
        font-size: 16px;
      }
    }
    .right {
      margin-top: 6px;
      font-size: 16px;
      flex: 1;
      text-align: center;
      display: flex;
      justify-content: space-around;
      .rightBox {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        .rightSmall {
          margin-top: 8px;
          font-size: 14px;
          color: #b5bac2;
        }
      }
    }
  }

  .contentsss {
    width: 100%;
    height: 126px;
    display: flex;
    font-size: 16px;
  }

  ::v-deep .cell {
    font-size: 16px;
  }
  .tableHead {
    height: 74px;
    display: flex;
    text-align: center;
    background-color: #022459;
    padding: 14px;
    .tabHead {
      height: 42px;
      text-align: center;
      width: 70px;
    }
  }
  .tableContent {
    height: 74px;
    margin: 6px 0;
    padding: 9px 15px;
    background-color: rgba(3, 31, 73, 0.5);
    .ttt {
      display: flex;
      justify-content: space-around;
      width: 80px;
      height: 34px;
      text-align: center;
      font-size: 14px;
    }
  }
  .tableContent:nth-child(2n) {
    background-color: #042043; /* 设置第二个 .tableContent 的背景色为白色 */
  }

  .blueText {
    color: #d9001b;
  }
}
</style>
